<template>
  <div>
    <div class="home">
      <h1>打卡管理</h1>
      <h2>本日批量打卡任务执行状态：{{ punchStatus ? '已执行' : '未执行' }}</h2>
      <h2>本日打卡成功率：{{ percent }}</h2>
      <h1 style="color: red;" v-show="allPunching">批量打卡中，请稍候...</h1>
      <h1 style="color: red;" v-show="onePunching">打卡中，请稍候...</h1>
      <div class="home" style="flex-direction: row;">
        <el-button type="primary" round @click="punchAll" :loading="allPunching">执行批量打卡任务</el-button>
        <el-button type="warning" round @click="retry" :loading="onePunching">一键补签（Beta）</el-button>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Home',
  components: {},
  data() {
    return {
      percent: '0%',
      punchStatus: false,
      allPunching: false,
      onePunching: false
    }
  },
  created() {
    this.getPunchStatus();
    this.getPunchSuccessPercent();
  },
  methods: {
    getPunchStatus() {
      this.$axios.get("/api/log/todayPunchStatus", {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }).then(res => {
        if (res.data.data === "1") {
          this.punchStatus = true;
        }
      }).catch(err => {
        console.log(err)
      })
    },
    getPunchSuccessPercent() {
      this.$axios.get("/api/log/todaySuccessPercent", {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }).then(res => {
        this.percent = res.data.data;
      }).catch(err => {
        this.percent = '获取失败';
      })
    },
    async punchAll() {
      this.allPunching = true;
      this.$axios.get("/api/punch/all").then(res => {
        console.log(res)
        this.allPunching = false;
      }).catch(err => {
        console.log(err)
        this.allPunching = false;
      })
    },
    async retry() {
      this.onePunching = true;
      this.$axios.get("/api/punch/retry").then(res => {
        console.log(res)
        this.onePunching = false;
      }).catch(err => {
        console.log(err)
        this.onePunching = false;
      })
    }
  }
}
</script>
<style scoped lang="scss">
.home {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  text-align: center;

  h1, h2, div, button {
    margin: 5vh 0 5vh 0;
  }

  h1 {
    font-size: xxx-large;
  }

  h2 {
    font-size: x-large;
  }
}
</style>
